<template>
  <div class="task">
    <div>
      <div class="options">
        <div style="padding: 5px">
          经营异常报告
          <el-button size="mini" @click="pooAmount">刷新</el-button>
        </div>
      </div>
      <div>
        <jc-table
          serial
          :table-data="tableData1"
          :table-header="tableHeader1"
          table-height="300px"
        >
          <template v-slot:btnStates="col">
            <el-link type="primary" @click="openDialods(col.scope.row)">{{ col.scope.row.exception }}</el-link>
          </template>
        </jc-table>
      </div>
      <el-tabs v-model="activeName1" type="card" @tab-click="pooAmount">
        <el-tab-pane v-for="item in tabsData" :key="item" :label="item" :name="item">
          <span slot="label">
            {{ item }} <span v-if="activeName1===item" style="color: #f56c6c">{{ total1 }}</span>
          </span>
        </el-tab-pane>
        <el-tab-pane label="全部" name="" />
      </el-tabs>
    </div>
    <div style="margin: 10px 0 5px">个人任务备忘录</div>
    <div style="margin-bottom: 5px">
      <el-button size="mini" @click="personalList">{{ $t('btn.reload') }}</el-button>
      <el-button size="mini" @click="tabsVisible=true">
        新增标签页
      </el-button>
      <el-checkbox v-model="fclosestatus" style="margin-left: 82%" @change="personalList">是否关闭状态</el-checkbox>
    </div>
    <div>
      <div v-show="activeName==='0'">
        <jc-table
          :table-header="tableHeader"
          :table-data="tableData"
          table-height="500px"
          serial
          @rowClick="rowClick"
        >
          <template v-slot:btnState="col">
            <el-date-picker
              v-model="col.scope.row.fstartdate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            />
          </template>
          <template v-slot:btnStates="col">
            <el-date-picker
              v-model="col.scope.row.fenddate"
              type="date"
              value-format="yyyy-MM-dd"
              style="width: 100%"
            />
          </template>
          <template v-slot:billSlot="col">
            <el-input v-model="col.scope.row.fdepartment" />
          </template>
          <template v-slot:tagSlot="col">
            <el-input v-model="col.scope.row.fdescribe" />
          </template>
          <template v-slot:text1Slot="col">
            <el-select v-model="col.scope.row.fstate">
              <el-option label="未处理" value="0" />
              <el-option label="处理中" value="1" />
              <el-option label="已处理" value="2" />
            </el-select>
          </template>
          <template v-slot:text2Slot="col">
            <el-input v-model="col.scope.row.fpersonname">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="openuser(1, col.scope.$index)"
              />
            </el-input>
          </template>
          <template v-slot:text3Slot="col">
            <el-input v-model="col.scope.row.fnote" />
          </template>
          <template v-slot:text4Slot="col">
            <el-tag v-if="col.scope.row.fclosestatus==='A'" type="primary">正常</el-tag>
            <el-tag v-if="col.scope.row.fclosestatus==='C'" type="danger">已关闭</el-tag>
          </template>
          <template v-slot:btnSlot="col">
            <!-- <el-button size="mini" type="success" @click.stop="openuser(1)">转发</el-button>-->
            <el-button size="mini" type="primary" @click="insterPerson(col.scope.row)">保存</el-button>
            <el-button size="mini" type="danger" @click.stop="delPerson(col.scope.row.fpkid, col.scope.$index)">删除</el-button>
            <el-button size="mini" type="warning" @click="closePerson(col.scope.row.fpkid, 1)">关闭</el-button>
          </template>
        </jc-table>
      </div>
      <div v-show="activeName!=='0'">
        <toExcel />
      </div>
      <el-tabs v-model="activeName" type="card" @tab-remove="removeTab">
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.label"
          :name="item.name"
          :closable="item.name!=='0'"
        />
      </el-tabs>
    </div>
    <div style="margin: 10px 0 5px">
      <div class="options">
        <div style="padding: 5px">
          部门经营分析报表
          <el-button size="mini">刷新</el-button>
        </div>
      </div>
      <div>
        <jc-table
          serial
          :table-data="tableData2"
          :table-header="tableHeader2"
          table-height="300px"
        />
      </div>
    </div>
    <!-- 新增标签页 -->
    <el-dialog
      v-dialogDrag
      title="新增标签页"
      :visible.sync="tabsVisible"
      model
      width="500px"
      :before-close="beforeClose"
      center
    >
      <el-form label-width="100px">
        <el-form-item label="标签名称">
          <el-input v-model="tabName" autofocus />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="beforeClose">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="addTab">
          {{ $t('btn.confirm') }}
        </el-button>
      </span>
    </el-dialog>
    <!--负责人-->
    <user v-if="userVisiblit" :msg="msg" :personame="personame" @supplier="selectApply" />
    <!-- 异常报告弹窗 -->
    <el-dialog
      v-dialogDrag
      :visible.sync="compVisible"
      width="95%"
      top="3vh"
      center
      :before-close="beforeClose1"
    >
      <!-- 销售订单 -->
      <marketOrder v-if="marketVis" :search-data="searchData" />
      <!-- 销售订单-成品出库 -->
      <cpOut v-if="cpOutVis" />
      <!-- 生产补料-超领 -->
      <supplementaryList v-if="suptaryVis" :search-data="searchData" />
      <!-- 生产订单 -->
      <proOrderList v-if="prorderVis" :search-data="searchData" />
      <!-- 生产异常-餐台餐椅 -->
      <ctaiCyi v-if="ctaiCyiVis" :department="departmentName" />
      <!-- 采购异常 -->
      <purchase v-if="purchaseiVis" :msg="purchase" />
      <!-- 库存异常-警报库存 -->
      <alarmInventory v-if="alarmiVis" />
      <!-- 库存异常-库存过盛 -->
      <kcguoshen v-if="kcgsVis" />
      <!-- 库存异常-库存库龄 -->
      <stockAge v-if="stockAgeVis" />
      <!-- 库存异常-盘盈盘亏 -->
      <lossGain v-if="lossGainVis" :msg="lossGain" />
      <!-- 生产异常-今日一周 -->
      <pickList v-if="pickVis" :msg="pickmsg" :depname="depname" />
    </el-dialog>
  </div>
</template>

<script>
import {
  closeTJxPersonal, deleteTJxPersonal,
  insertTJxPersonal,
  queryProductExceptionList,
  queryTJxPersonalList,
  updateTJxPersonal
} from '@/api/homePage/business'

export default {
  components: {
    user: () => import('@/views/basic/users/userslist/component/user'),
    cpOut: () => import('@/views/homePageNew/taskNote/cpOut'),
    lossGain: () => import('@/views/homePageNew/taskNote/lossGain'),
    pickList: () => import('@/views/homePageNew/taskNote/pickList'),
    stockAge: () => import('@/views/repertory/stockAge'),
    kcguoshen: () => import('@/views/homePageNew/taskNote/kcguoshen'),
    alarmInventory: () => import('@/views/repertory/alarmInventory'),
    purchase: () => import('@/views/homePageNew/taskNote/purchase'),
    ctaiCyi: () => import('@/views/homePageNew/taskNote/ctaiCyi'),
    proOrderList: () => import('@/views/production/collect/proOrderList'),
    supplementaryList: () => import('@/views/production/collect/supplementaryList'),
    marketOrder: () => import('@/views/market/marketManage/marketOrder'),
    toExcel: () => import('@/views/homePageNew/taskNote/excelt')
  },
  data() {
    return {
      userVisiblit: false, // 用户
      compVisible: false, // 弹窗
      marketVis: false, // 销售
      cpOutVis: false, // 销售出库
      suptaryVis: false, // 生产补料
      prorderVis: false, // 生产订单
      ctaiCyiVis: false, // 生产异常-餐台椅
      purchaseiVis: false, // 采购异常
      alarmiVis: false, // 库存异常
      kcgsVis: false, // 库存异常-过盛
      stockAgeVis: false, // 库存异常-库龄
      lossGainVis: false, // 库存异常-盘亏盘盈
      pickVis: false, // 生产异常-领料明细
      personame: [],
      departmentName: '',
      purchase: '',
      lossGain: '',
      pickmsg: '',
      depname: '',
      proValue: {
        fpkid: '',
        fstartdate: '',
        fenddate: '',
        fdepartment: '',
        fdescribe: '',
        fstate: '',
        fperson: '',
        fnote: ''
      },
      msg: 1,
      searchData: [],
      tableData: [],
      tableHeader: [
        { label: '开始时间', type: 'state' },
        { label: '完成时间', type: 'states' },
        { label: '部门', type: 'bill' },
        { label: '任务事项', type: 'tag', minWidth: '200' },
        { label: '任务状态', type: 'text1' },
        { label: '负责人', type: 'text2' },
        { label: '备注', type: 'text3' },
        { label: '关闭状态', type: 'text4', width: '100' },
        { label: '操作', type: 'btn', width: '260' }
      ],
      activeName: '0',
      editableTabs: [
        { label: '个人任务备忘录', name: '0' }
      ],
      indexSelf: 1,
      tabsVisible: false,
      tabName: '',
      activeName1: '生产异常',
      total1: 0,
      tabsData: ['生产异常', '销售异常', '超领警报', '库存异常', '采购异常'],
      tableData1: [],
      tableHeader1: [
        { label: this.$t('market.date1'), prop: 'date', width: '100' },
        { label: this.$t('shop.type'), prop: 'type', width: '100' },
        { label: this.$t('market.plaint'), prop: 'department', width: '120' },
        { label: this.$t('market.exception'), type: 'states', prop: 'exception', align: 'left', tooltip: true },
        { label: this.$t('market.abnormal1'), prop: 'abnormal' }
      ],
      fclosestatus: true,
      tableData2: [],
      tableHeader2: [
        { label: '独立核算部门', prop: '' },
        { label: '负责人', prop: '' },
        { label: '总人数', prop: '' },
        { label: '预计产值或销售额', prop: '' },
        { label: '材料耗用或采购成本金额', prop: '' },
        { label: 'ＦＯＢ及物流费用成本', prop: '' },
        { label: '成本合计', prop: '' },
        { label: '营业额（含税）', prop: '' },
        { label: '材料占比', prop: '' },
        { label: '部门工资合计', prop: '' },
        { label: '工资占比', prop: '' },
        { label: '部门固定费用', prop: '' },
        { label: '部门费用合计', prop: '' },
        { label: '费用占比', prop: '' },
        { label: '其他', prop: '' },
        { label: '数据来源', prop: '' },
        { label: '料工费合计', prop: '' },
        { label: '料工费合计比率 ', prop: '' },
        { label: '部门利润', prop: '' },
        { label: '毛利率', prop: '' },
        { label: '退税', prop: '' },
        { label: '本月部门经营异常分析说明', prop: '' },
        { label: '处理结果', prop: '' },
        { label: '备注', prop: '' }
      ]
    }
  },
  created() {
    this.pooAmount({ name: '生产异常' })
    this.personalList() // 任务
    this.indexSelf = this.editableTabs.length
  },
  methods: {
    // 生产异常
    pooAmount(ev) {
      queryProductExceptionList({ type: ev?.name }).then(res => {
        if (res.code === 0) {
          this.tableData1 = res.data
          this.total1 = res.data.length
        }
      })
    },
    // 打开用户列表 ev 1-转发 2-负责人
    openuser(ev, index) {
      this.msg = ev
      this.personame = this.tableData[index].fpersonname.split(',')
      this.indexSelf = index
      this.userVisiblit = true
    },
    // 转发
    selectApply(ev, en) {
      if (ev.length > 0 && this.msg === 1) {
        const item = this.tableData[this.indexSelf]
        item.fpersonid = ev.join(',')
        item.fpersonname = en.join(',')
      }
      this.userVisiblit = false
    },
    // 经营异常
    openDialods(ev) {
      this.compVisible = true
      if (ev.type === '销售异常') {
        if (ev.exception.indexOf('成品出库') !== -1) {
          this.cpOutVis = true
        } else {
          this.marketVis = true
          this.searchData = [
            { field: 'fdeliverydate', seach: ev.fdeliverydate1, fid: 4 },
            { field: 'fdeliverydate', seach: ev.fdeliverydate2, fid: 6 },
            { field: 'fbillNo', seach: ev.fbillno, fid: 12 },
            { field: 'fcloseStatus', seach: ev.fstatus, fid: 2 },
            { field: 'fdocumentStatus', seach: ev.fdocumentstatus, fid: 1 },
            { field: 'fyoutqty', seach: '1', fid: 4 }
          ]
        }
      } else if (ev.type === '超领警报') {
        this.suptaryVis = true
        this.searchData = [
          { field: 'fdate', seach: ev.fdate1, fid: 4 },
          { field: 'fdate', seach: ev.fdate2, fid: 6 },
          { field: 'fworkshop', seach: ev.department, fid: 7 },
          { field: 'fdocumentStatus', seach: ev.fdocumentstatus, fid: 7 }
        ]
      } else if (ev.department === '餐台' || ev.department === '餐椅') {
        this.departmentName = ev.department
        this.ctaiCyiVis = true
      } else if (ev.type === '生产异常') {
        if (ev.exception.indexOf('今日有') !== -1) {
          this.pickVis = true
          this.pickmsg = '1'
          this.depname = ''
        } else if (ev.exception.indexOf('最近一周') !== -1) {
          this.pickVis = true
          this.pickmsg = '2'
          this.depname = ev.department
        } else {
          this.prorderVis = true
          this.searchData = [
            { field: 'fdeliverydate', seach: ev.fdeliverydate1, fid: 4 },
            { field: 'fdeliverydate', seach: ev.fdeliverydate2, fid: 6 },
            { field: 'fdept', seach: ev.department, fid: 7 },
            { field: 'fstatus', seach: ev.fstatus1, fid: 2 },
            { field: 'fstatus', seach: ev.fstatus2, fid: 2 },
            { field: 'fdocumentStatus', seach: ev.fdocumentstatus, fid: 7 }
          ]
        }
      } else if (ev.type === '采购异常') {
        this.purchaseiVis = true
        if (ev.exception.indexOf('今日') === 0) {
          this.purchase = '1'
        } else {
          this.purchase = '2'
        }
      } else if (ev.type === '库存异常') {
        if (ev.exception.indexOf('安全库存警报') !== -1) {
          this.alarmiVis = true
        } else if (ev.exception.indexOf('库存过盛') !== -1) {
          this.kcgsVis = true
        } else if (ev.exception.indexOf('呆滞') !== -1) {
          this.stockAgeVis = true
        } else if (ev.exception.indexOf('盘亏') !== -1) {
          this.lossGainVis = true
          this.lossGain = '1'
        } else if (ev.exception.indexOf('盘盈') !== -1) {
          this.lossGainVis = true
          this.lossGain = '2'
        }
      }
    },
    beforeClose1() {
      this.compVisible = false
      this.marketVis = false
      this.suptaryVis = false
      this.prorderVis = false
      this.ctaiCyiVis = false
      this.purchaseiVis = false
      this.alarmiVis = false
      this.kcgsVis = false
      this.stockAgeVis = false
      this.lossGainVis = false
      this.cpOutVis = false
      this.pickVis = false
    },
    // 任务列表
    personalList() {
      const DATA = {
        fclosestatus: this.fclosestatus ? 'A' : 'C'
      }
      queryTJxPersonalList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
          this.addHang()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 新增任务
    insterPerson(ev) {
      const api = ev.fpkid ? updateTJxPersonal : insertTJxPersonal
      api(ev).then(res => {
        if (res.code === 0) {
          this.personalList()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 关闭任务
    closePerson(fpkid) {
      if (!fpkid) return
      closeTJxPersonal({ fpkid }).then(res => {
        if (res.code === 0) {
          this.personalList()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 删除任务
    delPerson(fpkid, ev) {
      if (!fpkid) {
        this.delHang(ev)
        return
      }
      this.$confirm('确认要删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteTJxPersonal({ fpkid }).then(res => {
          if (res.code === 0) {
            this.personalList()
            this.$message({ showClose: true, message: res.message, type: 'success' })
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'error'
            })
          }
        })
      })
    },
    // 单击行
    rowClick(row) {
      // 单击行index+1 === 数组长度 新增行
      if (row.index + 1 === this.tableData.length) this.addHang()
    },
    // 新增行
    addHang() {
      this.tableData.push({
        fstartdate: '',
        fenddate: '',
        fdepartment: '',
        fstate: '0',
        fpersonname: '',
        fnote: ''
      })
    },
    // 删除行
    delHang(index) {
      if (this.tableData.length === 1) return
      this.tableData.splice(index, 1)
    },
    // 新增tab
    addTab() {
      const newTabName = ++this.indexSelf + ''
      this.editableTabs.push({
        label: this.tabName || 'sheet' + newTabName,
        name: newTabName
      })
      this.activeName = newTabName
      this.tabName = ''
      this.tabsVisible = false
    },
    // 删除tab
    removeTab(targetName) {
      this.$confirm('确定要删除该标签页么？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const tabs = this.editableTabs
        let activeName = this.activeName
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.activeName = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      })
    },
    beforeClose() {
      this.tabName = ''
      this.tabsVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.task {
  @include listBom;
}
</style>
